<!--suppress CssUnusedSymbol -->
<template>
  <div class="ym-curd">
    <h3 v-if="title_" class="title">{{ title_ }}</h3>
    <el-row
      class="ym-curd-toolbar"
      type="flex"
      justify="space-between"
      v-if="toolbar_ || search_"
    >
      <el-col :span="6" v-if="toolbar_">
        <ym-toolbar
          v-bind="toolbar_"
          @click="onToolbar"
          :row="toolbar_value"
        />
      </el-col>
      <el-col :span="8" v-if="search_">
        <ym-search
          v-bind="search_"
          @search="onSearch"
        />
      </el-col>
    </el-row>
    <el-row>
      <ym-table
        v-bind="table"
        :rows="rows"
        @click="onTableAction"
        @selection-change="onTableSelect"
        ref="table"
      />
    </el-row>
    <el-row v-if="pagination">
      <el-pagination
        v-bind="pagination"
        layout="prev, pager, next"
        @current-change="onPage"
      />
    </el-row>
  </div>
</template>

<script>
import YmSearch from './search/YmSearch'
import YmToolbar from '@/ym/components/YmToolbar'
import YmTable from '@/ym/components/YmTable'
import * as Ui from '@/store/elementui'

/**
 * 自动表格实现
 */
export default {
  name: 'YmCurd',
  props: {
    [Ui.TITLE]: {
      type: String,
      default: null
    },
    /**
     * 数据地址
     */
    [Ui.URL]: {
      type: String,
      default: null
    },
    /**
     * 列表
     */
    [Ui.COLUMNS]: {
      type: Array,
      default: () => []
    },
    /**
     * 行操作
     */
    [Ui.EMBEDDED]: {
      type: Object,
      default: () => null
    },
    /**
     * 表格操作
     */
    [Ui.TOOLBAR]: {
      type: Object,
      default: () => null
    },
    /**
     * 查询
     */
    [Ui.SEARCH]: {
      type: Object,
      default: () => null
    }
  },
  data () {
    return {
      /**
       * 读取到的selected
       */
      selected: [],
      /**
       * 数据
       */
      rows: [],
      /**
       * selected row's ids
       */
      ids: [],
      /**
       * 当前绑定的查询
       */
      qs: {
        page: 1
      },
      /**
       * 分页信息
       */
      pagination: null,

      title_: this[Ui.TITLE],
      toolbar_: this[Ui.TOOLBAR],
      search_: this[Ui.SEARCH]
    }
  },
  computed: {
    table () {
      const columns = this[Ui.COLUMNS]
      const embedded = this[Ui.EMBEDDED]
      return {
        ...this.$attrs,
        columns,
        embedded
      }
    },
    toolbar_value () {
      const selected = this.ids.length > 0
      const id = this.ids
      return {
        selected,
        id
      }
    }
  },
  components: {
    YmSearch,
    YmToolbar,
    YmTable
  },
  watch: {
    selected (s) {
      this.table.rows.forEach((row) => {
        if (row.id && (s.findIndex(id => +id === +row.id) !== -1)) {
          this.$refs.table.toggleRowSelection(row)
        }
      })
    },
    async qs () {
      await this.refresh()
    }
  },
  created () {
    this.refresh()
  },
  methods: {
    onToolbar (btn) {
      this.onTableAction(btn, this.toolbar_value)
    },
    async onTableAction (btn, row) {
      await this.$http.Fire(btn, row)
      if (btn.redirect) return;
      await this.refresh()
    },
    onTableSelect (rows) {
      this.ids = rows ? rows.map((row) => {
        return row.id
      }) : []
    },
    onSearch (query) {
      this.qs = query
    },
    onPage (page) {
      const qs = this.qs
      this.qs = {
        ...qs,
        page
      }
    },
    async refresh () {
      if (!this[Ui.URL]) return
      const rs = await this.$http.Post(this[Ui.URL], this.qs)
      // 数据
      this.rows = rs[Ui.ROWS]
      // 选择信息
      rs[Ui.SELECTED] && (this.selected = rs[Ui.SELECTED])
      // 分页信息
      rs[Ui.PAGINATION] && (this.pagination = rs[Ui.PAGINATION])
    }
  }
}
</script>

<style scoped>
.ym-curd {
  width: 100%;
}
.ym-curd-toolbar {
  background-color: #ffffff;
  padding: 15px 10px 8px 10px;
}
.el-row {
  margin-bottom: 5px;
}
</style>
